<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			legend {
			    background-color: #000;
			    color: #fff;
			    padding: 3px 6px;
			}
			
			input {
			    margin: 0.4rem;
			}
			dl { margin-left: 6px; }
			dt { font-weight: bold; color: #217ac0; font-size: 110% }
			dt { font-family: Consolas, "Liberation Mono", Courier }
			dd { margin-left: 16px }
		</style>
	</head>
	<body>
		<h2>元素属性</h2>
		<p>abbr：
			<abbr title="这个标签叫abbr">悬停在我这里会显示提示</abbr>
		</p>
		<p>bdp：
			<bdo dir="rtl">bdo标签允许翻转文本</bdo>
		</p>
		<h2>折叠详细</h2>
		<p>details：
			<details>
				<summary>我是一个details</summary>
				summary之外可以显示折叠的内容
			</details>
		</p>
		<h2>边框标题</h2>
		<form>
		  <fieldset>
		    <legend>Choose your favorite monster</legend>
		
		    <input type="radio" id="kraken" name="monster" value="K">
		    <label for="kraken">Kraken</label><br>
		
		    <input type="radio" id="sasquatch" name="monster" value="S">
		    <label for="sasquatch">Sasquatch</label><br>
		
		    <input type="radio" id="mothman" name="monster" value="M">
		    <label for="mothman">Mothman</label>
		  </fieldset>
		</form>
		<h2>进度条</h2>
		<label for="file">File progress:</label>
		<progress id="file" max="100" value="70"> 70% </progress>
		<h2>元素注解</h2>
		<ruby>
		  漢 <rp>(</rp><rt>han</rt><rp>)</rp>
		  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
		</ruby>
		<ruby>
		  汉 <rt>Hàn</rt>
		  字 <rt>Zì</rt>
		</ruby>	
		<!-- <p>Regular text. <samp>This is sample text.</samp> Regular text.</p> -->
		<h2>插槽</h2>
		<template id="element-details-template">
		  <style>
		    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
		    .name {font-weight: bold; color: #217ac0; font-size: 120% }
		    h4 {
		      margin: 10px 0 -8px 0;
		      background: #217ac0;
		      color: white;
		      padding: 2px 6px;
		      border: 1px solid #cee9f9;
		      border-radius: 4px;
		    }
		    .attributes { margin-left: 22px; font-size: 90% }
		    .attributes p { margin-left: 16px; font-style: italic }
		  </style>
		  <details>
		    <summary>
		      <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
		      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
		    </summary>
		    <div class="attributes">
		      <h4>Attributes</h4>
		      <slot name="attributes"><p>None</p></slot>
		    </div>
		  </details>
		  <hr>
		</template>
		<element-details>
			<span slot="element-name">element-name插槽</span>
			<span slot="description">description组合出自己想要的效果</span>
			<dl slot="attributes">
				<dt>name</dt>
				<dd>Attributes插槽</dd>
			</dl>
		</element-details>
		<element-details>
			<span slot="element-name">模板的名称</span>
			<span slot="description">描述的插槽</span>
		</element-details>
	</body>
</html>
